<template>
  <el-container>
    <el-header>
      <!-- 头部开始 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item  style="cursor:pointer" :to="{path: '/statistics-item1'}">业绩统计</el-breadcrumb-item>
        <el-breadcrumb-item  style="cursor:pointer" :to="{path: '/statistics-item2'}" >课消统计</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <!-- 头部结束 -->
    <!-- 内容开始 -->
    <el-main>
      <div class="main-header">
        <div class="main-header-con">
          <!-- <span>今日&nbsp;&nbsp;&nbsp;&nbsp;本周&nbsp;&nbsp;&nbsp;&nbsp;本月&nbsp;&nbsp;&nbsp;&nbsp;</span> -->
          <ul>
            <li>今日</li>
            <li>本周</li>
            <li>本月</li>
          </ul>
          <div class="block">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
          <p>校区：</p>
          <el-select v-model="value" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="clear_both"></div>
        <!-- 图表开始 -->
        <div class="main-header-table">
          <h1>总业绩</h1>
          <div class="main-header-table-box">
            <div class="main-header-table-left">
              <h2>业绩占比</h2>
              <div id="main" style="width: 600px;height:330px;"></div>
            </div>
            <div class="main-header-table-right">
              <h2>总业绩趋势</h2>
              <div id="main1" style="width: 600px;height:330px;"></div>
            </div>
          </div>
        </div>
        <div class="main-header-table">
          <h1>课程业绩</h1>
          <div class="main-header-table-box">
            <el-col :span="12">
              <div class="main-header-table-left">
                <h2>订单类型占比</h2>
                <div id="main2" style="width: 600px;height:330px;"></div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="main-header-table-right">
                <h2>课程业绩趋势</h2>
                <div id="main3" style="width: 600px;height:330px;"></div>
              </div>
            </el-col>
          </div>
        </div>
        <div class="main-header-table">
          <h1>商品业绩</h1>
          <div class="main-header-table-box">
            <el-col :span="12">
              <div class="main-header-table-left">
                <h2>订单类型比</h2>
                <div id="main4" style="width: 600px;height:330px;"></div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="main-header-table-right">
                <h2>商品业绩趋势</h2>
                <div id="main5" style="width: 600px;height:330px;"></div>
              </div>
            </el-col>
          </div>
        </div>
        <div class="main-header-table">
          <h1>账号业绩</h1>
          <div class="main-header-table-box">
            <el-col :span="12">
              <div class="main-header-table-left">
                <h2>业绩占比</h2>
                <div id="main6" style="width: 600px;height:330px;"></div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="main-header-table-right">
                <h2>账户业绩趋势</h2>
                <div id="main7" style="width: 600px;height:330px;"></div>
              </div>
            </el-col>
          </div>
        </div>
        <!-- 图表结束 -->
      </div>
    </el-main>
    <!-- 内容结束 -->
  </el-container>
</template>
<script src="echarts.min.js"></script>
<script>
import echarts from "echarts";

export default {
  name: "statistics-item1",
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
     options: [
        {
          value: "选项1",
          label: "宝安校区",
        },
        {
          value: "选项2",
          label: "南山校区",
        },
        {
          value: "选项3",
          label: "福田校区",
        },
        {
          value: "选项4",
          label: "罗湖校区",
        },
        {
          value: "选项5",
          label: "盐田校区",
        },
       ],
      value: "",
      value1: "",
      value2: "",
    };
  },
  //此时页面上的元素渲染完毕
  mounted() {
    //总业绩的方法
    this.circleChart();
    this.treeTable();
    //课程业绩
    this.circleChart1();
    this.treeTable1();
    //商品业绩
    this.circleChart2();
    this.treeTable2();
    //账户业绩
    this.circleChart3();
    this.treeTable3();
  },
  methods: {
    // 圆标
    circleChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],

            label: {
              position: "inner",
            },
            labelLine: {
              show: false,
            },
            // data: [
            //   { value: 335, name: "总业绩 ￥123224", selected: true },

            // ],
          },
          {
            name: "业绩",
            type: "pie",
            radius: ["40%", "55%"],
            label: {
              formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
              backgroundColor: "#eee",
              borderColor: "#aaa",
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: "pink",
                  lineHeight: 22,
                  align: "center",
                },
                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33,
                },
                per: {
                  color: "#eee",
                  backgroundColor: "#334455",
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },
            data: [
              { value: 110, name: "课程业绩" },
              { value: 190, name: "商品业绩" },
              { value: 60, name: "账户业绩" },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 树状表
    treeTable() {
      let myChart = echarts.init(document.getElementById("main1"));
      let option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "10月",
              "11月",
              "12月",
              "01月",
              "02月",
              "03月",
              "04月",
              "05月",
              "06月",
              "07月",
              "08月",
              "本月",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [40, 250, 500, 750, 1000, 330, 220, 250, 500, 750, 1000, 330],
          },
        ],
      };
      myChart.setOption(option);
    },
    //图标
    circleChart1() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("main2"));
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        series: [
          {
            name: "金额",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],

            label: {
              position: "inner",
            },
            labelLine: {
              show: false,
            },
          },
          {
            name: "创收金额",
            type: "pie",
            radius: ["40%", "55%"],
            label: {
              formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
              backgroundColor: "#eee",
              borderColor: "#aaa",
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: "#999",
                  lineHeight: 22,
                  align: "center",
                },
                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33,
                },
                per: {
                  color: "#eee",
                  backgroundColor: "#334455",
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },
            data: [
              { value: 2201, name: "新单金额" },
              { value: 1220, name: "订单金额" },
              { value: 260, name: "续单金额" },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 树状表
    treeTable1() {
      let myChart = echarts.init(document.getElementById("main3"));
      let option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "10月",
              "11月",
              "12月",
              "01月",
              "02月",
              "03月",
              "04月",
              "05月",
              "06月",
              "07月",
              "08月",
              "本月",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [43, 220, 503, 250, 1000, 324, 220, 250, 430, 750, 1000, 330],
          },
        ],
      };
      myChart.setOption(option);
    },
    // 圆标
    circleChart2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("main4"));
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        series: [
          {
            name: "订单类型",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],

            label: {
              position: "inner",
            },
            labelLine: {
              show: false,
            },
            // data: [
            //   { value: 335, name: "总业绩 ￥123224", selected: true },

            // ],
          },
          {
            name: "订单",
            type: "pie",
            radius: ["40%", "55%"],
            label: {
              formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
              backgroundColor: "#eee",
              borderColor: "#aaa",
              borderWidth: 1,
              borderRadius: 4,
              // shadowBlur:3,
              // shadowOffsetX: 2,
              // shadowOffsetY: 2,
              // shadowColor: '#999',
              // padding: [0, 7],
              rich: {
                a: {
                  color: "#999",
                  lineHeight: 22,
                  align: "center",
                },
                // abg: {
                //     backgroundColor: '#333',
                //     width: '100%',
                //     align: 'right',
                //     height: 22,
                //     borderRadius: [4, 4, 0, 0]
                // },
                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33,
                },
                per: {
                  color: "#eee",
                  backgroundColor: "#334455",
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },
            data: [
              { value: 420, name: "招生" },
              { value: 120, name: "介绍" },
              { value: 20, name: "打听" },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 树状表
    treeTable2() {
      let myChart = echarts.init(document.getElementById("main5"));
      let option = {
        color: ["red"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "10月",
              "11月",
              "12月",
              "01月",
              "02月",
              "03月",
              "04月",
              "05月",
              "06月",
              "07月",
              "08月",
              "本月",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [790, 250, 500, 750, 600, 330, 220, 250, 560, 750, 1000, 330],
          },
        ],
      };
      myChart.setOption(option);
    },
    // 圆标
    circleChart3() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("main6"));
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        series: [
          {
            name: "账户业绩",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],

            label: {
              position: "inner",
            },
            labelLine: {
              show: false,
            },
            // data: [
            //   { value: 335, name: "总业绩 ￥123224", selected: true },

            // ],
          },
          {
            name: "业绩占比",
            type: "pie",
            radius: ["40%", "55%"],
            label: {
              formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
              backgroundColor: "#eee",
              borderColor: "#aaa",
              borderWidth: 1,
              borderRadius: 4,
              // shadowBlur:3,
              // shadowOffsetX: 2,
              // shadowOffsetY: 2,
              // shadowColor: '#999',
              // padding: [0, 7],
              rich: {
                a: {
                  color: "#999",
                  lineHeight: 22,
                  align: "center",
                },
                // abg: {
                //     backgroundColor: '#333',
                //     width: '100%',
                //     align: 'right',
                //     height: 22,
                //     borderRadius: [4, 4, 0, 0]
                // },
                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33,
                },
                per: {
                  color: "#eee",
                  backgroundColor: "#334455",
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },
            data: [
              { value: 120, name: "充值金额" },
              { value: 120, name: "消费金额" },
              { value: 120, name: "退费金额" },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 树状表
    treeTable3() {
      let myChart = echarts.init(document.getElementById("main7"));
      let option = {
        color: ["#ccc"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "10月",
              "11月",
              "12月",
              "01月",
              "02月",
              "03月",
              "04月",
              "05月",
              "06月",
              "07月",
              "08月",
              "本月",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [432, 250, 500, 750, 600, 330, 220, 250, 500, 750, 400, 330],
          },
        ],
      };
      myChart.setOption(option);
    },
    //分页
    
  },
};
</script>
<style scoped>
/* 头部样式 */
/* .el-menu-demo {
  height: 65px;
}

/* 图标 */
/* .el-icon-s-fold {
  width: 40px;
  background: pink;
  display: line-block;
  color: #626262;
  line-height: 65px;
} */
/* 订单 */
/* .order-box {
  width: 100px;
  height: 65px;
  background: pink;
}
.order1 {
  width: 80px;
  line-height: 65px;
  font-size: 16px;
  background: #626262;
}  */
.el-breadcrumb {
  height: 65px;
  /* background: pink; */
  line-height: 65px;
  font-size: 14px;
}
.el-breadcrumb-item {
  line-height: 65px;
  /* background: #ccc; */
}
.main-header {
  height: 65px;
  /* background: pink; */
  /* line-height: 65px; */
}
.main-header-con {
  width: 960px;
  height: 65px;
  float: right;
  /* background: #ccc; */
  line-height: 65px;
  display: flex;
}
.clear_both {
  clear: both;
}
.main-header-con ul li {
  display: inline-block;
  color: #808183;
  padding: 0 15px;
}
.main-header-con .block {
  margin: 0 20px;
}
.el-select {
  width: 271px;
}

/* 图表 */
.main-header-table-box {
  /* background: #808183; */
  height: 355px;
  display: flex;
}
.main-header-table{
  /* height: 350px; */
  background: #fff;
  padding: 20px;
  margin: 20px 0;
}
.main-header-table h1 {
  font-size: 18px;
  /* color: #61a7e8; */

  width: 100%;
  height: 30px;
}
.main-header-table-left {
  width: 600px;
  height: 355px;
  /* background: #ccc; */
  float: left;
}
.main-header-table-right {
  overflow: hidden;
  width: 600px;
  height: 355px;
  background: #fff;
  float: right;
}
.main-header-table-left h2 {
  color: #5a7fa2;
  font-size: 16px;
  /* margin-top: 50px; */
}
.main-header-table-right h2 {
  color: #5a7fa2;
  font-size: 16px;
  /* margin-top: 50px; */
}
</style>

